.buddle-chart {
  width: 100%;
  .buddle-content {
    margin-left: 148px;
    .table {
      width: 100%;
      height: 100%;
      .tr {
        margin-bottom: 54px;
        display: flex;
        align-items: center;
        position: relative;

        .title {
          position: absolute;
          width: 113px;
          left: -148px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          span {
            width: 100%;
            overflow: hidden;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            font-size: 14px;
            color: #535f75;
            text-align: right;
            line-height: 20px;
          }
        }

        &:last-child {
          margin-bottom: 0px;
        }
        .td {
          height: 0;
          position: relative;
          flex: 0 0 auto;

          .dot {
            position: absolute;
            width: 32px;
            height: 32px;
            top: -16px;
            left: -16px;
            z-index: 8;
            display: flex;
            justify-content: center;
            align-items: center;
            > .dot-solid {
              background: #478aff;
              box-shadow: 0px 0px 8px 0px rgba(8, 93, 255, 0.4);
              border-radius: 50%;
            }
          }
          .top-line {
            position: absolute;
            top: -54px;
            width: 1px;
            height: 54px;
            background-image: linear-gradient(
              to bottom,
              rgba(215, 219, 224, 1) 0%,
              rgba(215, 219, 224, 1) 50%,
              transparent 50%
            );
            background-size: 1px 9px;
            background-repeat: repeat-y;
          }
          .right-line {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background-image: linear-gradient(
              to right,
              rgba(215, 219, 224, 1) 0%,
              rgba(215, 219, 224, 1) 50%,
              transparent 50%
            );
            background-size: 9px 1px;
            background-repeat: repeat-x;
          }

          .xaxis-name {
            position: absolute;
            display: block;
            width: 220px;
            top: 0;
            left: 50%;
            margin-left: -110px;
            text-align: center;
            font-size: 14px;
            color: #535f75;
          }
        }
      }
    }
  }
}
